<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <style>
        * {
            box-sizing: border-box;
        }

        nav {
            background-color: #2196F3;
            overflow: hidden;
        }

        nav a {
            float: left;
            color: #FFFFFF;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 18px;
        }

        nav a:hover {
            background-color: #0B7DD1;
        }

        nav a.active {
            background-color: #0B7DD1;
        }

        .container {
            margin: 20px;
        }

        h1 {
            text-align: center;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        th,
        td {
            text-align: left;
            padding: 8px;
        }

        th {
            background-color: #2196F3;
            color: #FFFFFF;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        tr:hover {
            background-color: #ddd;
        }
    </style>
</head>

<body>
    <nav>
        <a href="#">首页</a>
        <a href="#">题目列表</a>
        <a href="#">新增题目</a>
        <a class="active" href="#">个人中心</a>
    </nav>
    <div class="container">
        <h1>个人中心</h1>
        <table id="problem-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>标题</th>
                    <th>难度</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <script>
        // 发送ajax请求获取题目列表数据
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/problem', true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var problems = JSON.parse(xhr.responseText);
                var tableBody = document.querySelector('#problem-table tbody');
                problems.forEach(function (problem) {
                    var row = document.createElement('tr');
                    row.innerHTML = '<td>' + problem.id + '</td>' +
                        '<td>' + problem.title + '</td>' +
                        '<td>' + problem.difficulty + '</td>';
                    tableBody.appendChild(row);
                });
            }
        };
        xhr.send();
    </script>
</body>

</html>